<template>
  <view>
    <map
      class="map"
      :latitude="latitude"
      :longitude="longitude"
      :scale="scale"
      :markers="covers"
      @markertap="markerTap"
      @tap.stop="mapTap"
    />
    <view class="fixed search">
      <image class="search__icon" src="~@/static/searchIcon.png" />
      <input class="search__input" placeholder="搜索街区内商铺位置" />
      <text @tap="search">搜索</text>
    </view>
    <view v-if="detail.visible" class="fixed detail">
      <view class="detail__name">肯德基-科学城第十二分店</view>
      <view class="detail__desc">
        <image class="detail__icon" src="~@/static/address.png" />
        <text>惠民中心广场36号楼由东往西第十间</text>
      </view>
      <view @tap="detailEvent" class="detail__imgBox">
        <image class="detail__img" src="https://bkimg.cdn.bcebos.com/pic/5243fbf2b2119313b07e36c9356d1bd7912397dd2736?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2U4MA==,g_7,xp_5,yp_5" />
        <view class="detail__box">
          <image class="icon" src="~@/static/detail.png" />
          <text class="text">店铺详情</text>
        </view>
      </view>
      <image @tap="detail.visible = false" class="detail__close" src="~@/static/clearIcon.png" />
    </view>
    <view @tap="carStopPay" class="fixed bottom-nav">
      <view class="nav__left">
        <view class="nav__block">P</view>
        <text>街区剩余</text>
        <text class="nav__tip">167</text>
        <text>个停车位</text>
      </view>
      <view class="nav__right">
        <text>停车缴费</text>
        <image class="nav__arrow" src="~@/static/my/yellowArrow.png" />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 32.001251,
      longitude: 114.911612,
      scale: 16,
      covers: [{
        id: 1,
        latitude: 32.001251,
        longitude: 114.912453,
        width: 42,
        height: 42,
        iconPath: '/static/address.png',
        title: '这是啥？',
        callout: {
          content: '肯德基-科学城第十二分店',
          color: '#FBBF0D',
          padding: 6,
          bgColor: '#ffffff',
          borderRadius: 4
        }
      }, {
        id: 2,
        latitude: 32.005251,
        longitude: 114.912453,
        width: 42,
        height: 42,
        iconPath: '/static/address.png',
        title: '这是啥？',
        callout: {
          content: '肯德基-科学城第二分店',
          color: '#FBBF0D',
          padding: 6,
          bgColor: '#ffffff',
          borderRadius: 4
        }
      }],
      detail: {
        visible: false
      }
    }
  },
  methods: {
    markerTap(e) {
      console.log(e)
      setTimeout(() => {
        this.detail.visible = true;
      }, 200)
    },
    mapTap() {
      console.log('点击了')
      if(this.detail.visible) {
        this.detail.visible = false;
      }
    },
    carStopPay() {
      uni.navigateTo({
        url: '/subpages/index/carId/carId'
      })
    },
    search() {
      // uni.openLocation({
      //   latitude: 29.58832234563708,//纬度
      //   longitude: 106.56436432812498,//经度
      //   name: "电脑城",
      //   address: "重庆九龙坡"
      // });
    },
    detailEvent() {
      uni.navigateTo({
        url: '/subpages/shop/detail/detail'
      })
    }
  }
}
</script>

<style lang="scss">
.fixed {
  width: 90%;
  height: 96rpx;
  border-radius: 22rpx;
  background-color: #fff;
  box-shadow: 0 12rpx 48rpx 4rpx rgba(0, 0, 0, 0.1);
  position: fixed;
  left: 5%;
  box-sizing: border-box;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #333333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.map {
  width: 100%;
  height: 100vh;
}
/* 搜索 */
.search {
  top: 2%;
  padding-right: 28rpx;
}
.search__icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 8rpx;
}
.search__input {
  flex: 1;
  margin-right: 24rpx;
}
/* 详情 */
.detail {
  padding-top: 24rpx;
  padding-bottom: 24rpx;
  height: auto;
  flex-direction: column;
  top: calc(2% + 96rpx + 2%);
  align-items: flex-start;
}
.detail__name {
  color: #333;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}
.detail__desc {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 12rpx;
  display: flex;
  align-items: center;
}
.detail__icon {
  min-width: 32rpx;
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
}
.detail__imgBox {
  width: 100%;
  height: 280rpx;
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
}
.detail__img {
  width: 100%;
  height: 100%;
}
.detail__close {
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  top: 24rpx;
  right: 24rpx;
  background-color: #fff;
}
.detail__box {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 172rpx;
  height: 52rpx;

  display: flex;
  justify-content: center;
  align-items: center;
  .icon {
    width: 100%;
    height: 100%;
  }
  .text {
    color: #fff;
    font-size: 26rpx;
    position: absolute;
    margin: auto;
    margin-left: 24rpx;
  }
}
/* 底部栏 */
.bottom-nav {
  bottom: 6%;
}
.nav__left {
  display: flex;
  align-items: center;
}
.nav__block {
  width: 40rpx;
  height: 40rpx;
  background-color: #0061E8;
  color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  font-weight: bold;
  line-height: 1;
  margin-right: 12rpx;
}
.nav__tip {
  color: #FBBF0D;
  margin: 0 4rpx;
}
.nav__right {
  color: #FBBF0D;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.nav__arrow {
  width: 32rpx;
  height: 64rpx;
  margin-left: 8rpx;
}
</style>
